<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<%@include file="/head.jsp"%>
	
	<link href="${basePath}/resources/css/cdgrid.css" type="text/css" rel="stylesheet" />
	<script src="jsp/task/Task/index.js" type="text/javascript"></script>
	<style>
	.ui-tabs .ui-tabs-nav li {
		float: right;
	}
	</style>
</head>
<body>
<div id="main-content">
<div id="tabs">
	<ul>
		<li style="float: left; top: 5px;">我的任务</li>
		<li><a href="#tabs-1" class="default-tab">&nbsp;&nbsp;&nbsp;&nbsp;任务列表</a></li> <!-- href must be unique and match the id of target div -->
		<li><a href="#tabs-2">任务详情</a></li>
	</ul>
	<div id="tabs-1">
		<div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->
			<div class="ui-widget">
				<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
					<p>
						<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
						点击任务, 可以查看任务详情, 任务状态显示当前任务处在未开始,进行中,挂起,结束等状态.
					</p>
				</div>
			</div>
			<br />
			<table id="center-grid" style="width: 100%;">
				<thead>
					<tr>
						<th><input class="check-all" type="checkbox" /></th>
						<th>计划时间</th>
						<th>任务标题</th>
						<th>状态</th>
						<th>创建人</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>

			<div class="pagination">
				<a href="#" title="First Page">&laquo; First</a><a href="#" title="Previous Page">&laquo; Previous</a>
				<a href="#" class="number" title="1">1</a>
				<a href="#" class="number" title="2">2</a>
				<a href="#" class="number current" title="3">3</a>
				<a href="#" class="number" title="4">4</a>
				<a href="#" title="Next Page">Next &raquo;</a><a href="#" title="Last Page">Last &raquo;</a>
			</div> <!-- End .pagination -->

			<script id="template" type="text/x-jquery-tmpl">
				<tr>
					<td><input type="checkbox" name="bh" value="{{= bh}}" /></td>
					<td>[{{= planstarttime}}] ~ [{{= planendtime}}]</td>
					<td><a href="#">{{= title}}</a></td>
					<td>{{= coding.progress[progress]}}</td>
					<td>{{= createuser}}</td>
					<td>{{= createtime}}</td>
					<td>
						<a href="#" title="Edit"><img src="resources/images/icons/pencil.png" tppabs="http://demo.ponjoh.com/Simpla-Admin/resources/images/icons/pencil.png" alt="Edit" /></a>
						<a href="#" title="Delete"><img src="resources/images/icons/cross.png" tppabs="http://demo.ponjoh.com/Simpla-Admin/resources/images/icons/cross.png" alt="Delete" /></a> 
						<a href="#" title="Edit Meta"><img src="resources/images/icons/hammer_screwdriver.png" tppabs="http://demo.ponjoh.com/Simpla-Admin/resources/images/icons/hammer_screwdriver.png" alt="Edit Meta" /></a>
					</td>
				</tr>
			</script>
		</div> <!-- End #tab1 -->
		
		<div id="tabs-2">
		
			<form action="" method="post">
				
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					
					<p>
						<label>Small form input</label>
							<input class="text-input small-input" type="text" id="small-input" name="small-input" /> <span class="input-notification success png_bg">Successful message</span> <!-- Classes for input-notification: success, error, information, attention -->
							<br /><small>A small description of the field</small>
					</p>
					
					<p>
						<label>Medium form input</label>
						<input class="text-input medium-input datepicker" type="text" id="medium-input" name="medium-input" /> <span class="input-notification error png_bg">Error message</span>
					</p>
					
					<p>
						<label>Large form input</label>
						<input class="text-input large-input" type="text" id="large-input" name="large-input" />
					</p>
					
					<p>
						<label>Checkboxes</label>
						<input type="checkbox" name="checkbox1" /> This is a checkbox <input type="checkbox" name="checkbox2" /> And this is another checkbox
					</p>
					
					<p>
						<label>Radio buttons</label>
						<input type="radio" name="radio1" /> This is a radio button<br />
						<input type="radio" name="radio2" /> This is another radio button
					</p>
					
					<p>
						<label>This is a drop down list</label>              
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
						</select> 
					</p>
					
					<p>
						<label>Textarea with WYSIWYG</label>
						<textarea class="text-input textarea wysiwyg" id="textarea" name="textfield" cols="79" rows="15"></textarea>
					</p>
					
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
					
				</fieldset>
				
				<div class="clear"></div><!-- End .clear -->
				
			</form>
			
		</div> <!-- End #tab2 -->        
		
	</div> <!-- End .content-box-content -->
	
</div> <!-- End .content-box -->

</div> <!-- End .content-box-header -->

</body>
</html>